:root {
  --avatar-position-top: 30px;
  --avatar-height: 60px;
  --slider-user-info-top: calc(var(--avatar-position-top) + var(--avatar-height) + 9px);
  --slider-height: calc(100% - var(--windows-height) - var(--footer-height) - 4px)
}

.right-slider {
  position: fixed;
  top: calc(0% + var(--windows-height) + 0.5px);
  height: var(--slider-height);
  background-color: var(--right-background-color);
  transition: var(--transition-time);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  color: var(--common-color)
}

.right-slider-frame {
  position: relative;
  height: var(--slider-height)
}

.avatar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
}

.avatar img {
  width: var(--avatar-height);
  height: var(--avatar-height);
  border-radius: 50%;
}

.slider-user-info {
  position: absolute;
  left: 50%;
  top: var(--slider-user-info-top);
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  height: 90%;
}

.slider-operation{
  padding: 15px;
  height: 100%;
}

.slider-operation>div{
  width: 70%;
  left: 50%;
  transform: translateX(25%);
}

.slider-operation>div>div{
  display: flex;
  justify-content: space-between;
}

.slider-btn{
  /* padding: 3px 8px !important; */
  /* font-size: 12px !important; */
  /* height: 24px !important; */
}

.slider-footer {
  position: absolute;
  left: 50%;
  bottom: calc(0% - 20px);
  transform: translateX(-50%);
  text-align: center;
  color: var(--gray-color-3);
  font-size: 13px;
}
